<template>
    <div class="swiper">
            <a-carousel arrows dots autoplay>
                <div
                        slot="prevArrow"
                        class="custom-slick-arrow"
                        style="left: 10px;zIndex: 1"
                >
                    <a-icon type="left-circle" />
                </div>
                <div slot="nextArrow"  class="custom-slick-arrow" style="right: 10px">
                    <a-icon type="right-circle" />
                </div>
                <div v-for="(item,index) in swiper" :key="index" :style="{'background-image': 'url('+item.imgUrlPc+')','height':'400px'}" class="swiperimg"></div>
            </a-carousel>
    </div>
</template>

<script>
    export default {
        name: "Swiper",
        data(){
            return{
                swiper:[],
            }
        },
        created(){
            // 轮播图
            this.$axios.get('http://wkt.myhope365.com/weChat/applet/course/banner/list?number=5').then(res=>{
                this.swiper=res.data.data;
                // console.log(this.swiper);
            }).catch(err=>{
                console.log(err);
            })

        }
    }
</script>

<style scoped>
    .swiper {
        height: 400px;
    }
    /* For demo */
    .ant-carousel {
        height: 400px;
    }
    .ant-carousel >>> .slick-slide {
        text-align: center;
        height: 400px;
        /*line-height: 400px;*/
        /*background: #364d79;*/
        overflow: hidden;
    }

    .ant-carousel >>> .custom-slick-arrow {
        width: 25px;
        height: 25px;
        font-size: 25px;
        color: #fff;
        /*background-color: rgba(31, 45, 61, 0.11);*/
        opacity: 0.3;
    }
    .ant-carousel >>> .custom-slick-arrow:before {
        display: none;
    }
    .ant-carousel >>> .custom-slick-arrow:hover {
        opacity: 0.5;
    }

    .ant-carousel >>> .slick-slide h3 {
        color: #fff;
    }
    .swiperimg {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    /*.slick-dots-bottom>li>button,*/
    /*.slick-dots-bottom>li{*/
    /*    width: 20px;*/
    /*    height: 20px;*/
    /*    border-radius: 50%;*/
    /*}*/
     /deep/.ant-carousel .slick-dots li button {
         /*display: block;*/
         width: 10px;
         height: 10px;
         border-radius: 50%;
     }
    /deep/.ant-carousel .slick-dots li.slick-active button{
        width: 10px;
        background-color: #007AFF;
    }

</style>

